<template>
	<view class="content">
		<!-- <view class="avatorWrapper">
			<view class="avator">
				<image class="img" src="https://web-tiliasljq.oss-cn-hangzhou.aliyuncs.com/%E5%B0%8F%E7%A8%8B%E5%BA%8F%E5%A4%B4%E5%83%8F.jpg"></image>
			</view>
		</view> -->
		<view class="form">
			<view class="inputWrapper">
				<input class="input" type="text" v-model="query.phoneNum" placeholder="请输入手机号"/>
			</view>
			<view class="inputWrapper">
				<input class="input" type="password" v-model="query.password" placeholder="请输入密码"/>
			</view>
			<view class="loginBtn" @click="login">
				<text class="btnValue">登录</text>
			</view>
			<view class="forgotBtn">
				<text>找回密码</text>
			</view>
		</view>
	</view>
</template>

<script>
  import {
    mapMutations
  } from 'vuex'
	export default {
		data() {
			return {
				userId: '',
				title: 'Hello',
        query:{
        phoneNum:'',
        password:'',
        },
        userInfo:{
          nickName:'',
          avatarUrl:'',
          status:1,
        },
        isLoading:false
			}
		},
		onLoad() {

		},
    
		methods: {
      ...mapMutations('m_user', ['updateUserInfo', 'updateToken', 'updateRedirectInfo']),
        async login(){
          if(this.isLoading)return
          
          this.isLoading=true          
          
          const {
            data:res
          } = await
          uni.$http.post('/farmer/login', this.query)
          if(res.code==200){
			uni.setStorageSync('userId', res.data.userId);
			uni.setStorageSync('location', res.data.location);
			uni.setStorageSync('longitude', res.data.longitude);
			uni.setStorageSync('latitude', res.data.latitude);
            this.userInfo.avatarUrl=res.data.avatar;
            this.userInfo.nickName=res.data.name;
            this.updateToken(res.data.token)
            this.updateUserInfo(this.userInfo)
            uni.showToast({
              title: '登录成功',
              icon: 'success', //将值设置为 success 或者 ''
              duration: 1000 //持续时间为 2秒
            })
           
            setTimeout(() => {
              uni.switchTab({
                url: '/pages/home/home'
              })
              this.isLoading=false
            }, 2000);
             
          }
          else{
            uni.showToast({
              title: '登录失败',
              icon: 'error', //将值设置为 success 或者 ''
              duration: 2000 //持续时间为 2秒
            })
            this.isLoading=false
          }
          
          
          
        }
		}
	}
</script>

<style lang="scss">
	
	.content {
		background: #fffaec;
		width: 100vw;         /* 宽度占满整个视口宽度 */
	    height: 100vh;        /* 高度占满整个视口高度 */
	    display: flex;        /* 使用 Flexbox 布局 */
	    justify-content: center;  /* 水平居中 */
	    align-items: center;      /* 垂直居中 */
	}
	// .avatorWrapper{
	// 	height: 30vh;
	// 	width: 100vw;
	// 	display: flex;
	// 	justify-content: center;
	// 	align-items: flex-end;
	// }
	// .avator{
	// 	width: 200rpx;
	// 	height: 200rpx;
	// 	overflow: hidden;
	// }
	// .avator .img{
	// 	width: 100%;
	// 	object-fit: contain;
	// }
	.form{
		padding: 0 100upx;
		margin-top: 80px;
	}
	.inputWrapper{
		width: 100%;
		height: 80upx;
		background: white;
		border-radius: 20px;
		box-sizing: border-box;
		padding: 0 20px;
		margin-top: 25px;
	}
	.inputWrapper .input{
		width: 100%;
		height: 100%;
		text-align: center;
		font-size: 15px;
	}
	.loginBtn{
		width: 100%;
		height: 80upx;
		background: #fbd269;
		border-radius: 50upx;
		margin-top: 50px;
		display: flex;
		justify-content: center;
		align-items: center;
		
	}
	.loginBtn .btnValue{
		color: white;
	}
	.forgotBtn{
		text-align: center;
		color: #92989a;
		font-size: 15px;
		margin-top: 20px;
	}
</style>
